<template>
  <div class="cost_conter">
    <!-- 头部搜索相关 -->
    <el-form class="" :model="queryParams" size="small" :inline="true">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="">
            <el-input
              v-model="queryParams.foodName"
              placeholder="请输入产品名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery()"
              >查询
            </el-button>
            <el-button
              size="mini"
              v-hasPermi="['bom:dishbom:add']"
              @click="handleCreate"
              >创建成本卡</el-button
            >
            <el-button
              size="mini"
              v-hasPermi="['bom:dishbom:add']"
              @click="semiFinishedCreate"
              >创建半成品</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 主体表单  v-loading="loading" -->
    <el-table
      :data="menuList"
      row-key="menuId"
      class="cost_tbale"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @selection-change="menuListChange"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="deptName" label="部门" align="center">
      </el-table-column>
      <el-table-column
        align="center"
        prop="foodName"
        label="产品名称"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="销售单价"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cost"
        label="成本"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="grossProfit"
        label="毛利"
        width="80"
      >
      </el-table-column>
      <el-table-column align="center" prop="grossProfitRate" label="毛利率">
        <template slot-scope="scope">
          <div>{{ scope.row.grossProfitRate }}%</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isEnable" label="是否启用">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.isEnable == 0">未启用</span>
            <span v-if="scope.row.isEnable == 1">启用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="verifierStatus" label="审核状态">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.verifierStatus == 0">待审核</span>
            <span v-if="scope.row.verifierStatus == 1">已审核</span>
            <span v-if="scope.row.verifierStatus == 2">已拒绝</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdTime">
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        prop="createdBy"
        label="制作人"
      ></el-table-column>
      <el-table-column align="center" prop="isLock" label="是否锁定">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.isLock == 0">未锁定</span>
            <span v-if="scope.row.isLock == 1">已锁定</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="remark"
        label="备注"
      ></el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['bom:bom:id']"
            @click="handleLook(scope.row)"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['dish:bom:update']"
            @click="handleUpdate(scope.row, 1)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            v-hasPermi="['dish:bom:pageLog']"
            type="text"
            @click="Looklog(scope.row, 1)"
          >
            日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加/产看/编辑成本卡弹框 -->
    <el-dialog
      @close="onClose"
      width="60%"
      :title="CostTitle"
      :visible.sync="dialogFormVisible"
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="12">
            <el-row :gutter="8">
              <el-col :span="11">
                <el-form-item label="制作部门" prop="deptId">
                  <el-select
                    v-if="OpenCreate"
                    v-model="formData.deptId"
                    clearable
                    :style="{ width: '100%' }"
                    @change="onchenge"
                  >
                    <el-option
                      v-for="(item, index) in departmentOption"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptId"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>

                  <span v-else>{{ formData.deptName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="15">
                <el-form-item label="选择产品" prop="field104">
                  <el-input
                    v-if="OpenCreate"
                    v-model="formData.foodName"
                    placeholder="请选择产品"
                    :disabled="ShoeAddOpen"
                    @focus="OnDishList()"
                  ></el-input>
                  <span v-else>{{ formData.foodName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col text-align="center" :span="8">
                <el-form-item label="默认销售单位" prop="field108">
                  <div v-if="leng">
                    {{ unit.unit }}
                  </div>
                  <div v-else>
                    <el-select
                      v-model="nac"
                      @change="UnitsChange"
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in units"
                        :key="index"
                        :label="item.unit"
                        :value="index"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="销售单价" prop="field111">
                  <div>
                    {{ unit.price }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="成本" prop="zongding">
                  <!-- {{ zongding }} -->
                  {{ cost }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col text-align="center" :span="8">
                <el-form-item label="毛利" prop="field113">
                  {{ grossProfit }}
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="毛利率" prop="field114">
                  {{ grossProfitRate }}%
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="成品系数" prop="field115">
                  1.0
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-button
            type="primary"
            size="medium"
            v-if="loadType == 1"
            style="margin-bottom: 10px"
            :disabled="ShoeAddOpen"
            @click="AddWuliao"
            >添加物料</el-button
          >
          <el-table :data="tableData">
            <el-table-column align="center" prop="stapName" label="物料名称">
              <template slot-scope="scope">
                <div>
                  <span v-if="LookCostCart"> {{ scope.row.stapName }} </span>

                  <el-input
                    v-else-if="OpenCreate || formData.isLock == 0"
                    v-model="scope.row.stapName"
                    placeholder="请选择物料"
                    @focus="OnMaterialsList(scope.row)"
                  ></el-input>
                  <span v-else>{{ scope.row.stapName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="核算单位定额成本">
              <el-table-column align="center" prop="quota" label="定额">
                <template slot-scope="scope">
                  <div v-if="LookCostCart || formData.isLock == 1">
                    {{ scope.row.quota }}
                  </div>
                  <el-input
                    v-else
                    @change="dine(scope.row)"
                    v-model="scope.row.quota"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="stapBaseUnitOne"
                label="单位"
              >
              </el-table-column>
              <el-table-column align="center" prop="initPrice" label="价格">
              </el-table-column>

              <el-table-column align="center" prop="cost" label="成本">
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="库存单位定额">
              <el-table-column align="center" prop="stapAuxUnit" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="stapSpec" label="规格">
              </el-table-column>
              <el-table-column align="center" prop="woolen" label="毛料">
              </el-table-column>
              <el-table-column
                align="center"
                prop="netDeliveryRate"
                label="出净率"
              >
              </el-table-column>
              <el-table-column align="center" prop="cleanMaterial" label="净料">
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" v-if="loadType == 1">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    size="medium"
                    :disabled="formData.isEnable == 1"
                    @click="DelTable(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-row style="margin-top: 10px">
            <el-col :span="12" class="btn">
              <el-button
                v-if="btn1 != '审核'"
                type="primary"
                size="medium"
                :disabled="formData.isEnable == 1"
                round
                @click="btn1_1(2)"
              >
                <!--  -->
                {{ btn1 }}
              </el-button>
              <el-popover
                v-else
                placement="top"
                width="300"
                v-model="veriasVisible"
              >
                <p>是否确认审核通过</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini" @click="btn1_1(2, 1)">
                    通过
                  </el-button>
                  <el-popover placement="top" v-model="veriasVisi">
                    <div class="span_1" style="text-align: left !important">
                      拒绝原因
                    </div>
                    <el-input
                      v-model="remark"
                      placeholder="请输入拒绝原因(选填)"
                    ></el-input>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="btn1_1(2, 2)"
                      >
                        确认
                      </el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          veriasVisible = false;
                          veriasVisi = false;
                        "
                        >取消
                      </el-button>
                    </div>
                    <el-button
                      style="margin: 0 5px"
                      slot="reference"
                      type="primary"
                      size="mini"
                      >拒绝</el-button
                    >
                  </el-popover>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="veriasVisible = false"
                  >
                    取消
                  </el-button>
                </div>
                <el-button
                  :disabled="formData.isEnable == 0"
                  type="primary"
                  size="medium"
                  slot="reference"
                  round
                >
                  审核
                </el-button>
              </el-popover>
            </el-col>
            <el-col :span="12" class="btn">
              <el-button
                type="primary"
                size="medium"
                v-if="loadType == 1"
                :disabled="formData.isEnable == 1"
                round
                @click="btn1_2(1)"
              >
                启用
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-dialog>
    <!-- 选择菜品 -->
    <el-dialog
      @open="onChooseDishesOpen"
      @close="onChooseDishesClose"
      width="40%"
      title="请选择菜品"
      :visible.sync="ChooseDishesVisible"
    >
      <el-form
        :model="ChooseDishesQueryParams"
        size="medium"
        label-width="100px"
      >
        <el-row>
          <el-col :span="5">
            <el-input
              v-model="ChooseDishesQueryParams.foodCode"
              placeholder="请输入产品编码"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="ChooseDishesQueryParams.foodName"
              placeholder="请输入产品名称"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-button @click="getDishList()">查看</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        highlight-current-row
        @current-change="ChooseDishesChange"
        :data="ChooseDishesData"
        style="width: 100%"
      >
        <el-table-column prop="foodCode" label="编码" width="180">
        </el-table-column>
        <el-table-column prop="foodName" label="名称" width="180">
        </el-table-column>
        <!-- <el-table-column prop="unit" label="默认单位"> </el-table-column> -->
        <!-- <el-table-column prop="initPrice" label="单价"> </el-table-column> -->
        <el-table-column prop="isNews" label="新产">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isNews == "false" ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="isLock" label="锁定">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isLock == 1 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 菜品分页 -->
      <pagination
        :total="ChooseDishestotal"
        :page.sync="ChooseDishesQueryParams.pageNum"
        :limit.sync="ChooseDishesQueryParams.pageSize"
        @pagination="getDishList"
      />
      <el-row style="margin-top: 20px">
        <el-col :span="12" class="btn">
          <el-button
            type="primary"
            size="medium"
            round
            @click="ChooseDishesCan"
          >
            确定
          </el-button>
        </el-col>
        <el-col :span="12" class="btn">
          <el-button
            type="primary"
            size="medium"
            round
            @click="ChooseDishesDeny"
          >
            取消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 选择物料 -->
    <el-dialog
      @open="onMaterialsOpen"
      @close="onMaterialsClose"
      width="40%"
      title="选择物料"
      :visible.sync="materialsVisible"
    >
      <el-tabs v-model="activeName" @tab-click="Tabs_click">
        <el-tab-pane label="物料" name="first"></el-tab-pane>
        <el-tab-pane
          label="半成品"
          v-if="!semiFinishedVisible"
          name="second"
        ></el-tab-pane>
      </el-tabs>
      <el-row>
        <el-col :span="24">
          <el-form
            :model="materialsQueryParams"
            :inline="true"
            size="small"
            label-width="100px"
          >
            <el-form-item prop="">
              <el-input
                v-model="materialsQueryParams.stapCode"
                placeholder="请输入原料编码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="">
              <el-input
                v-model="materialsQueryParams.stapName"
                placeholder="请输入原料名称"
              ></el-input>
            </el-form-item>
            <el-button @click="getMaterialsList">查找</el-button>
          </el-form>
        </el-col>
      </el-row>
      <el-table
        highlight-current-row
        @current-change="materialsChange"
        :data="materialsData"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          v-if="secondShow"
          prop="stapTypeName"
          label="类别"
        >
        </el-table-column>
        <el-table-column
          v-if="secondShow"
          prop="stapCode"
          align="center"
          label="原料编码"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="stapName"
          align="center"
          :label="secondShow ? '原料名称' : '半成品名称'"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="stapBaseUnit" label="单位">
        </el-table-column>
      </el-table>
      <pagination
        :total="materialstotal"
        :page.sync="materialsQueryParams.pageNum"
        :limit.sync="materialsQueryParams.pageSize"
        @pagination="getMaterialsList"
      />
      <el-row style="margin-top: 30px">
        <el-col :span="12" class="btn">
          <el-button type="primary" size="medium" round @click="MaterialsCan()">
            确定
          </el-button>
        </el-col>
        <el-col :span="12" class="btn">
          <el-button
            type="primary"
            size="medium"
            round
            @click="MaterialsDeny()"
          >
            取消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 添加半成品弹框    semiFinishedVisible -->
    <el-dialog
      @close="onClose"
      width="60%"
      :title="CostTitle"
      :visible.sync="semiFinishedVisible"
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="12">
            <el-row :gutter="8">
              <el-col :span="11">
                <el-form-item label="制作部门" prop="deptId">
                  <el-select
                    v-model="formData.deptId"
                    clearable
                    :style="{ width: '100%' }"
                    @change="onchenge"
                  >
                    <el-option
                      v-for="(item, index) in departmentOption"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptId"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="15">
                <el-form-item label="选择产品" prop="field104">
                  <el-input
                    v-model="formData.foodName"
                    placeholder="请选择产品"
                    :disabled="ShoeAddOpen"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col text-align="center" :span="8">
                <el-form-item label="默认销售单位" prop="field108">
                  <el-input
                    v-model="unit.unit"
                    placeholder="请输入单位"
                  ></el-input>
                  <!--  -->
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="销售单价" prop="field111">
                  <div style="width: 50px">
                    <!-- <el-input @blur="priceBlur" v-model="price"></el-input> -->
                    {{ price }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="成本" prop="zongding">
                  <!-- {{ zongding }} -->
                  {{ cost }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col text-align="center" :span="8">
                <el-form-item label="毛利" prop="field113"> 0 </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="毛利率" prop="field114">
                  {{ grossProfitRate }}%
                </el-form-item>
              </el-col>
              <el-col text-align="center" :span="8">
                <el-form-item label="成品系数" prop="field115">
                  1.0
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-button
            type="primary"
            size="medium"
            v-show="loadType == 1"
            style="margin-bottom: 10px"
            :disabled="ShoeAddOpen"
            @click="AddWuliao"
            >添加物料</el-button
          >
          <el-table :data="tableData">
            <el-table-column align="center" prop="bumen" label="耗用部门">
              <template slot-scope="scope">
                <div>
                  <span v-if="formData.isLock == 1">
                    {{ scope.row.depart }}
                  </span>
                  <el-select
                    v-else-if="OpenCreate"
                    v-model="scope.row.depart"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in departmentOption"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptId"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                  <span v-else>
                    {{ scope.row.depart }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="stapName" label="物料名称">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model="scope.row.stapName"
                    placeholder="请选择物料"
                    @focus="OnMaterialsList(scope.row)"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="库存单位定额成本">
              <el-table-column
                align="center"
                prop="stapBaseUnitOne"
                label="单位"
              >
              </el-table-column>
              <el-table-column align="center" prop="initPrice" label="价格">
              </el-table-column>
              <el-table-column align="center" prop="quota" label="定额">
                <template slot-scope="scope">
                  <el-input
                    @change="dine(scope.row)"
                    v-model="scope.row.quota"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="cost" label="成本">
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="核算单位定额">
              <el-table-column align="center" prop="stapAuxUnit" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="stapSpec" label="规格">
              </el-table-column>
              <el-table-column align="center" prop="woolen" label="毛料">
              </el-table-column>
              <el-table-column
                align="center"
                prop="netDeliveryRate"
                label="出净率"
              >
              </el-table-column>
              <el-table-column align="center" prop="cleanMaterial" label="净料">
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" v-if="loadType == 1">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    size="medium"
                    @click="DelTable(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-row>
            <el-col :span="12" class="btn">
              <el-button
                type="primary"
                size="medium"
                round
                @click="semiFinished(1)"
              >
                保存
              </el-button>
            </el-col>
            <el-col :span="12" class="btn">
              <el-button
                type="primary"
                size="medium"
                round
                @click="semiFinished(2)"
              >
                启用
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-dialog>
    <!-- 日志 -->
    <el-dialog width="40%" title="日志" :visible.sync="BomlogVisible">
      <el-tabs v-model="activeName" @tab-click="Tabs1_click">
        <el-tab-pane label="修改" name="first"></el-tab-pane>
        <el-tab-pane label="锁定" name="second"></el-tab-pane>
        <el-tab-pane label="审批" name="shenpi"></el-tab-pane>
      </el-tabs>
      <el-table
        highlight-current-row
        @current-change="materialsChange"
        style="width: 100%"
        :data="BonLogList"
      >
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column prop="createdTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column prop="remark" align="center" label="操作内容">
        </el-table-column>
        <el-table-column prop="createdBy" align="center" label="操作人">
        </el-table-column>
      </el-table>
      <!-- <pagination
        :total="materialstotal"
        :page.sync="materialsQueryParams.pageNum"
        :limit.sync="materialsQueryParams.pageSize"
        @pagination="getMaterialsList"
      /> -->
      <el-row style="margin-top: 20px">
        <el-col :span="12" class="btn">
          <el-button
            type="primary"
            size="medium"
            round
            @click="BomlogVisible = false"
          >
            确定
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDish_bom,
  bomDish_bom,
  addDish_bom,
  Dish_bomList,
  idDish_bomList,
  BomDish_bomEdit,
  listUnitDish_bom,
  EditDish_bomEdit,
  lockDisBom,
  Dish_bomLock,
  dishbomBompage,
  dishbomBomlog,
  selectedStapByIdForBom,
} from "@/api/system/bom";
import { listDept } from "@/api/system/dept.js";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 创建成本卡title
      CostTitle: "",
      BonLogList: [],
      activeName: "first",
      semiFinishedVisible: false,
      // 控制部门，产品显示显示
      OpenCreate: false,
      secondShow: true,
      //日志的显示隐藏
      BomlogVisible: false,
      logId: "",
      //添加弹框
      dialogFormVisible: false,
      // 选择物料弹框
      materialsVisible: false,
      //选择菜品弹框
      ChooseDishesVisible: false,
      veriasVisible: false,
      veriasVisi: false,
      remark: "",
      AllotList: {},
      //更改按钮状态 1创建\编辑 3查看
      loadType: 1,
      // 总条数
      total: 0,
      // 物料总条数
      materialstotal: 0,
      //菜品总条数
      ChooseDishestotal: 0,
      ShoeAddOpen: true,
      isUpdate: 0,
      btn1: "",
      btn2: "",
      // 菜品列表
      menuList: [],
      // 成本卡中物料列表
      tableData: [],
      // 添加成本卡的物料列表
      formData: {
        deptId: "",
        deptName: "",
        foodName: "",
      },
      //存储修改的值
      stap: [],
      // 菜品单位
      unit: {},
      // 菜品单位(数组)
      units: [],
      // 存储选中的index值
      nac: null,
      //选中菜品数
      ChooseDishesList: [],
      // 菜品列表
      ChooseDishesData: [],
      //单位数量
      leng: true,
      // 分页
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 菜品分页
      ChooseDishesQueryParams: {
        pageNum: 1,
        pageSize: 10,
        // 查询数据
        // 菜品名称
        foodCode: null,
        //菜品ID
        foodName: null,
      },
      //物料数据列表
      materialsData: [],
      // 选中添加物料的foodCode
      materialsCode: null,
      meterId: null,
      //物料分页
      materialsQueryParams: {
        stapCode: "",
        stapName: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 存储选中物料的数据
      materialsList: [],
      rules: {
        deptId: [
          {
            required: true,
            message: "请选择门店",
            trigger: "change",
          },
        ],
        foodName: [
          {
            required: true,
            message: "请选择菜品",
            trigger: "change",
          },
        ],
      },

      // 部门
      departmentOption: [],
      price: "",
      // 判断销售单价 true 显示unit 的价格 false 可以自定义价格
      priceShow: true,

      //保存选中的数据
      menuChangeList: [],
      // 锁定成本卡
      LookCostCart: false,
      // 点击编辑
      EditCostCart: false,
      isDish: false,
    };
  },
  computed: {
    // 成本
    cost() {
      let a = 0;
      // console.log(this.tableData, "--------------------------1115");
      this.tableData.filter((item) => {
        if (item.cost) {
          a += Number(item.cost);
        }
      });
      return a.toFixed(2);
    },
    // 毛利
    grossProfit() {
      if (this.unit.price) {
        let co = this.unit.price - this.cost;
        return co.toFixed(2);
      }
    },
    // 毛利率
    grossProfitRate() {
      if (this.grossProfit > 0) {
        return Math.floor((this.grossProfit / this.unit.price) * 100).toFixed(
          0
        );
      } else {
        return 0;
      }
    },
  },
  created() {
    this.getList();
    this.getDept();
  },
  methods: {
    /** 获取BOM信息 */
    getList() {
      let TqlDish = this.queryParams;
      this.loading = true;
      Dish_bomList(TqlDish).then((response) => {
        if (response.code == 200) {
          // console.log(response);
          this.menuList = response.rows;
          this.total = response.total;
          this.loading = false;
        } else {
          this.$message({
            message: response.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    // 获取菜品信息
    getDishList() {
      this.loading = true;
      this.ChooseDishesQueryParams.deptId = this.formData.deptId;
      // console.log(this.ChooseDishesQueryParams);
      listDish_bom(this.ChooseDishesQueryParams).then((response) => {
        if (response.code == 200) {
          this.ChooseDishesData = response.rows;
          this.ChooseDishestotal = response.total;
          this.loading = false;
        } else {
          this.$message({
            message: response.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    //获取物料信息
    getMaterialsList() {
      let TqlDish = {
        ...this.materialsQueryParams,
      };
      console.log(TqlDish);
      bomDish_bom(TqlDish).then((response) => {
        // console.log(response);
        if (response.code == 200) {
          this.materialsData = response.rows;
          this.materialstotal = response.total;
          this.loading = false;
        } else {
          this.$message({
            message: response.msg,
            type: "warning",
            center: true,
          });
        }
      });
      this.loading = true;
    },
    // 获取部门信息
    getDept() {
      listDept().then((red) => {
        // console.log(red);
        if (red.code == 200) {
          this.departmentOption = red.data;
        } else {
          this.$message({
            message: red.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    OnDishList() {
      this.ChooseDishesVisible = true;
    },
    materialsSearch() {},
    //编辑按钮启动
    handleUpdate(v, i) {
      // 是否启动编辑
      this.isUpdate = i;
      // 启动添加物料按钮
      this.ShoeAddOpen = false;
      this.OpenCreate = false;
      this.LookCostCart = false;
      // 判断是否锁定
      if (v.isLock == 0) {
        this.EditCostCart = true;
      } else {
        this.EditCostCart = false;
      }
      this.loadType = 1;
      this.CostTitle = "编辑成本卡";
      this.btn1 = "存草稿";
      this.btn2 = "启用";
      this.priceShow = true;
      idDish_bomList(v.id).then((res) => {
        if (res.code == 200) {
          this.formData = res.data;
          this.unit = res.data;
          res.data.sput.forEach((item, index) => {
            item.base.ab = index;
            item.base.id = item.base.stapId;
            item.base.price = item.price;
            item.base.initPrice = item.price;
            item.base.quota = item.quota;
            if (item.mt) {
              item.base.stock = item.mt.fconvertNumerator;
              item.base.stapBaseUnitOne =
                item.base.stapBaseUnit +
                "(" +
                item.mt.fconvertNumerator +
                item.base.stapAuxUnit +
                ")";
            } else {
              item.base.stapBaseUnitOne = item.base.stapBaseUnit;
            }
            delete item.base.id;
            this.tableData.push(item.base);
          });
          this.dialogFormVisible = true;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    // 点击创建成本卡
    handleCreate() {
      this.dialogFormVisible = true;
      this.OpenCreate = true;
      this.LookCostCart = false;
      this.loadType = 1;
      this.CostTitle = "创建成本卡";
      this.isUpdate = 0;
      this.btn1 = "存草稿";
      this.btn2 = "启用";
      this.isDish = 1;
    },
    //点击创建半成品
    semiFinishedCreate() {
      this.semiFinishedVisible = true;
      this.CostTitle = "创建半成品";
    },
    // 点击查看
    handleLook(v) {
      this.loadType = 2;
      this.btn1 = "审核";
      this.CostTitle = "查看成本卡";
      // 是否修改
      this.isUpdate = 0;
      this.OpenCreate = false;
      // 查看成本卡
      this.LookCostCart = true;
      // 价格显示
      this.priceShow = true;
      this.formData = v;
      this.unit = v;
      idDish_bomList(v.id).then((res) => {
        if (res.code == 200) {
          res.data.unit = res.data.stapBaseUnit;
          res.data.sput.forEach((item, index) => {
            item.base.ab = index;
            item.base.id = item.bomId;
            item.base.price = item.price;
            item.base.initPrice = item.price;
            item.base.quota = item.quota;
            if (item.mt) {
              item.base.stock = item.mt.fconvertNumerator;
              item.base.stapBaseUnitOne =
                item.base.stapBaseUnit +
                "(" +
                item.mt.fconvertNumerator +
                item.base.stapAuxUnit +
                ")";
            } else {
              item.base.stapBaseUnitOne = item.base.stapBaseUnit;
            }
            delete item.base.id;
            this.tableData.push(item.base);
          });
          this.dialogFormVisible = true;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    //定额变化时触发
    dine(i) {
      console.log(i);
      let co = i.initPrice * Number(i.quota);
      this.$set(i, "cost", co.toFixed(2));
    },
    quotaBack(i) {
      let co = i.initPrice * Number(i.quota);
      // this.unit.price - this.cost
      this.$set(this.unit, "price", co.toFixed(2));

      this.$set(i, "cost", co.toFixed(2));
    },
    //添加物料
    AddWuliao() {
      this.tableData.push({
        ab: this.tableData.length,
      });
    },
    //选择菜品确定
    ChooseDishesCan() {
      this.ChooseDishesVisible = false;
      this.formData.foodId = this.ChooseDishesList.foodId;
      this.formData.foodName = this.ChooseDishesList.foodName;
      this.formData.foodCode = this.ChooseDishesList.foodCode;
      // console.log(this.formData, "-----------------------------------1398");
      listUnitDish_bom(this.ChooseDishesList.foodId).then((res) => {
        if (res.code == 200) {
          if (res.rows.length == 1) {
            this.unit = res.rows[0];
            if (this.unit.price == undefined) {
              this.priceShow = false;
            }
            this.leng = true;
          } else {
            this.units = res.rows;
            this.leng = false;
            this.priceShow = false;
          }
          this.getList();
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
            center: true,
          });
        }
      });
    },
    UnitsChange() {
      this.unit = this.units[this.nac];
      if (this.unit.price == undefined) {
        this.priceShow = false;
      } else {
        this.priceShow = true;
      }
    },
    //选择菜品取消
    ChooseDishesDeny() {
      this.ChooseDishesVisible = false;
      this.ChooseDishesList = [];
    },
    //物料列表选中触发
    OnMaterialsList(v) {
      this.materialsVisible = true;
      console.log(v);
      this.materialsCode = v.ab;
    },
    //选择物料确定
    MaterialsCan() {
      // this.materialsList 准备添加的物料/半成品
      // this.materialsCode 准备好的标志位
      // 判断是不是半成品
      console.log(this.materialsList, this.formData);
      selectedStapByIdForBom({
        id: this.materialsList.id,
        deptCode: this.formData.deptCode,
      }).then((res) => {
        if (res.data) {
          if (res.data.base.price) {
          }
          // if (res.data.flag == 1 || res.data.flag == 2) {
          let arr = this.tableData.filter(
            (item) => item.stapCode == res.data.base.stapCode
          );

          if (arr.length >= 1) {
            this.$message({
              message: "物料不能重复",
              type: "warning",
              center: true,
            });
          } else {
            res.data.base.ab = this.materialsCode;
            res.data.base.id = res.data.base.stapId;
            res.data.base.initPrice = res.data.base.price;
            if (res.data.mt) {
              res.data.base.stock = res.data.mt.fconvertNumerator;
              res.data.base.stapBaseUnitOne =
                res.data.base.stapBaseUnit +
                "(" +
                res.data.mt.fconvertNumerator +
                res.data.base.stapAuxUnit +
                ")";
            } else {
              res.data.base.stapBaseUnitOne = res.data.base.stapBaseUnit;
            }

            delete res.data.base.id;
            this.$set(this.tableData, this.materialsCode, res.data.base);
          }
          this.materialsVisible = false;
          // } else if (res.data.flag == 3) {
          //   this.$confirm(
          //     "该物料有辅助单位且无单位转换值,请前往物料单位转换进行设置",
          //     "提示",
          //     {
          //       confirmButtonText: "确定",
          //       cancelButtonText: "取消",
          //       type: "warning",
          //     }
          //   )
          //     .then(() => {
          //       this.$router.push("/information/stapUnit");
          //     })
          //     .catch(() => {
          //       this.$message({
          //         type: "info",
          //         message: "已取消",
          //       });
          //       this.materialsVisible = false;
          //     });
          // } else if (res.data.flag == 4) {
          //   this.$confirm(
          //     "该物料没有辅助单位,请前往物料单位转换进行设置",
          //     "提示",
          //     {
          //       confirmButtonText: "确定",
          //       cancelButtonText: "取消",
          //       type: "warning",
          //     }
          //   )
          //     .then(() => {
          //       this.$router.push("/information/stapUnit");
          //     })
          //     .catch(() => {
          //       this.$message({
          //         type: "info",
          //         message: "已取消",
          //       });
          //       this.materialsVisible = false;
          //     });
          // }
        }
      });
    },
    //选择物料取消
    MaterialsDeny() {
      this.materialsVisible = false;
      this.materialsData = [];
    },
    //删除物料
    DelTable(v) {
      // 需要删除的物料数组  this.tableData
      //  要删除的物料内容 v
      console.log(v);
      this.tableData.filter((item, index) => {
        if (item.ab == v.ab) {
          this.tableData.splice(index, 1);
        }
      });
      // 重新赋值ab
      this.tableData.forEach((item, index) => {
        item.ab = index;
        console.log(index);
      });
    },
    // 点击审核或者存草稿
    btn1_1(v, i) {
      let bel = true;
      // console.log(v, i, "************************************1519");
      if (this.loadType == 1) {
        this.GetFormData();
        // 菜品下的物料
        this.tableData.filter((item) => {
          if (item.initPrice != null) {
            // console.log("---------------------------------------1024");
            if (item.quota != null) {
              if (item.stapName != null) {
                this.stap.push(item);
              }
            } else {
              this.$message({
                message: "定额不能为空",
                center: true,
              });
            }
          } else {
            bel = false;
            this.$confirm(
              "价格不能为空，请前往物料及价格信息处添加物料价格",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                this.$router.push("/information/price_information");
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          }
        });
        this.stap.forEach((item) => {
          item.unit = item.stapBaseUnit;
        });
        this.formData.bomList = this.stap;
        this.departmentOption.filter((item) => {
          if (item.deptId == this.formData.deptId) {
            this.formData.deptName = item.deptName;
          }
        });
        if (this.isUpdate == 0) {
          if (bel) {
            this.formData.type = 1;
            addDish_bom({ ...this.formData }).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  center: true,
                });
                this.dialogFormVisible = false;
                this.getList();
              } else {
                this.$message({
                  message: res.msg,
                  center: true,
                });
              }
              this.nac = null;
            });
          }
        } else {
          if (bel) {
            EditDish_bomEdit(this.formData).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "warning",
                  center: true,
                });
                this.dialogFormVisible = false;
                this.nac = null;
                this.getList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning",
                  center: true,
                });
              }
            });
          }
        }

        // console.log("存草稿");
      } else if (this.loadType == 2) {
        // console.log("审核");
        let obj = {
          id: this.formData.id,
          verifierStatus: i,
          verifierRefuseReason: this.remark,
          foodName: this.formData.foodName,
        };
        if (i == 1) {
          obj.isEnable = 1;
          obj.isLock = 1;
        } else {
          obj.isEnable = 0;
          obj.isLock = 0;
        }
        BomDish_bomEdit(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "warning",
              center: true,
            });
            this.remark = "";
            this.veriasVisible = false;
            this.veriasVisi = false;
            this.getList();
          }
        });
      }
    },
    // 点击启用
    btn1_2() {
      let bel = true;
      if (this.loadType == 1) {
        this.GetFormData();
        // 是否启用
        this.formData.isEnable = 1;
        //添加锁定状态
        this.formData.isLock = 1;
        // 菜品下的物料
        this.tableData.filter((item) => {
          if (item.initPrice != null) {
            // console.log("---------------------------------------1024");
            if (item.quota != null) {
              if (item.stapName != null) {
                this.stap.push(item);
              }
            } else {
              this.$message({
                message: "定额不能为空",
                center: true,
              });
            }
          } else {
            bel = false;
            this.$confirm(
              "价格不能为空，请前往物料及价格信息处添加物料价格",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                this.$router.push("/information/price_information");
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          }
        });
        this.stap.forEach((item) => {
          item.unit = item.stapBaseUnit;
        });
        this.formData.bomList = this.stap;
        this.departmentOption.filter((item) => {
          if (item.deptId == this.formData.deptId) {
            this.formData.deptName = item.deptName;
          }
        });

        if (this.isUpdate == 0) {
          if (bel) {
            this.formData.type = 1;
            addDish_bom(this.formData).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.getList();

                this.$message({
                  message: res.msg,
                  center: true,
                });
              } else {
                this.$message({
                  message: res.msg,
                  center: true,
                });
              }
              this.nac = null;
              this.dialogFormVisible = false;
            });
          }
        } else {
          if (bel) {
            EditDish_bomEdit(this.formData).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "warning",
                  center: true,
                });
                this.nac = null;
                this.getList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning",
                  center: true,
                });
              }
            });
          }
        }
        this.dialogFormVisible = false;
        // console.log("启用");
      } else if (this.loadType == 2) {
        // console.log("锁定");
        let obj = [
          {
            id: this.formData.id,
            isLock: this.formData.isLock == 0 ? 1 : 0,
          },
        ];
        lockDisBom(obj).then((res) => {
          if (res.code == 200) {
            this.getList();
          }
        });
      }
      this.getList();
    },
    //
    ChooseDishesChange(v) {
      this.ChooseDishesList = v;
      // console.log(v);
    },
    //选中物料时触发
    materialsChange(v) {
      if (v) {
        this.materialsList = v;
      }
    },
    //成本卡 关闭
    onClose() {
      // 清空选中菜品
      this.formData = {
        isLock: 0,
      };
      //清空选中物料
      this.tableData = [];
      //清空菜品
      this.unit = {};
      this.units = [];
      // 清空储存的物料
      this.stap = [];
      this.OpenCreate = false;
      this.LockCostCart = true;
      this.EditCostCart = false;
      this.priceShow = true;
      this.isDish = null;
      this.ShoeAddOpen = true;
    },
    //物料打开
    onMaterialsOpen() {
      this.getMaterialsList();
    },
    //物料关闭
    onMaterialsClose() {
      this.materialsQueryParams.stapCode = "";
      this.materialsQueryParams.stapName = "";
      this.activeName = "first";
    },
    //菜品打开
    onChooseDishesOpen() {
      this.getDishList();
    },
    // 菜品卡关闭
    onChooseDishesClose() {
      this.ChooseDishesQueryParams.dish_id = "";
      this.ChooseDishesQueryParams.dish_name = "";
      // this.formData.dishName = this.ChooseDishesList.dishName;
      // 清空选中菜品
      this.ChooseDishesList = [];
    },
    // 获取添加数据
    GetFormData() {
      this.formData.price = this.unit.price;
      // 成本
      this.formData.cost = this.cost;
      //毛利
      this.formData.grossProfit = Number(this.grossProfit);
      //毛利率
      this.formData.grossProfitRate = this.grossProfitRate;
      this.formData.unitId = this.unit.id;
      // 成品系数
      this.formData.product_coefficient = "1.0";
      // 添加审核状态
      this.formData.verifierStatus = 0;
      //添加锁定状态
      this.formData.isLock = 0;
    },
    //获取选中的数据
    menuListChange(v) {
      this.menuChangeList = v;
    },
    // 批量锁定
    All_Lock() {
      let obj = [];
      this.menuChangeList.forEach((item) => {
        obj.push({
          id: item.id,
          isLock: item.isLock == 0 ? "1" : "0",
        });
      });
      // console.log(obj, "----------------------------1256");

      Dish_bomLock(obj).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.getList();
        }
      });
    },
    priceBlur() {
      this.unit.price = this.price;
    },
    // 点击查看日志
    Looklog(v) {
      this.BomlogVisible = true;
      this.logId = v.id;
      dishbomBomlog({ id: v.id, type: 1 }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.BonLogList = res.rows;
        }
      });
    },
    //  添加 半成品选项
    semiFinished(i) {
      let bel = true;
      // 销售价格
      this.formData.price = this.cost;
      // 成本
      this.formData.cost = this.cost;
      //毛利
      this.formData.grossProfit = 0;
      //毛利率
      this.formData.grossProfitRate = 0;
      this.formData.unit = this.unit.unit;
      // 成品系数
      this.formData.product_coefficient = "1.0";
      // 添加审核状态
      this.formData.verifierStatus = 0;
      //添加锁定状态
      this.formData.isLock = 0;
      this.tableData.forEach((item) => {
        if (item.initPrice != null) {
          // console.log("---------------------------------------1024");
          if (item.quota != null) {
            if (item.stapName != null) {
              this.stap.push(item);
            }
          } else {
            this.$message({
              message: "定额不能为空",
              center: true,
            });
          }
        } else {
          bel = false;
          this.$confirm(
            "价格不能为空，请前往物料及价格信息处添加物料价格",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$router.push("/information/price_information");
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
      });
      this.stap.forEach((item) => {
        item.unit = item.stapBaseUnit;
      });
      this.formData.bomList = this.stap;
      this.departmentOption.filter((item) => {
        if (item.deptId == this.formData.deptId) {
          this.formData.deptName = item.deptName;
        }
      });
      this.formData.type = 0;
      if (i == 1) {
        // 是否启用
        this.formData.isEnable = 0;
      } else if (i == 2) {
        // 是否启用
        this.formData.isEnable = 1;
      }
      if (bel) {
        addDish_bom(this.formData).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.getList();
            this.$message({
              message: res.msg,
              center: true,
            });
          } else {
            this.$message({
              message: res.msg,
              center: true,
            });
          }
          this.nac = null;
          this.semiFinishedVisible = false;
        });
      }
    },
    // 物料切换
    Tabs_click(tab, event) {
      // console.log(this.activeName);
      if (tab.name == "second") {
        // console.log("半成品");
        this.secondShow = false;
        dishbomBompage({ type: 0 }).then((res) => {
          if ((res.code = 200)) {
            for (let i = 0; i < res.rows.length; i++) {
              const element = res.rows[i];
              res.rows[i].cost = "";
              res.rows[i].stapName = res.rows[i].foodName;
              res.rows[i].stapBaseUnit = res.rows[i].unit;
              res.rows[i].stapCode = res.rows[i].id;
              res.rows[i].initPrice = res.rows[i].price;
            }
            // Number()
            this.materialstotal = Number(res.total);
            // console.log(res.rows, "-*-*--*-*-----------------------1913");
            this.materialsData = res.rows;
          }
        });
      } else if (tab.name == "first") {
        // console.log("物料");
        this.secondShow = true;
        this.getMaterialsList();
      }
    },
    Tabs1_click(tab, event) {
      // console.log(tab, event, "*-----------------------------------------1978");
      let type;
      if (tab.name == "first") {
        type = 1;
      } else if (tab.name == "second") {
        type = 2;
      } else if (tab.name == "shenpi") {
        type = 3;
      }
      dishbomBomlog({ id: this.logId, type: type }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.BonLogList = res.rows;
        }
      });
    },
    // 获取shopCode
    onchenge(v) {
      if (v) {
        this.ShoeAddOpen = false;
      } else {
        this.ShoeAddOpen = true;
      }
      this.departmentOption.forEach((ite) => {
        if (ite.deptId == v) {
          this.formData.deptCode = ite.deptCode;
          this.ChooseDishesQueryParams.deptCode = ite.deptCode;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: space-around;
}
.cost_conter {
  margin: 20px;
  .const_top {
    background-color: white;
    border-radius: 5px;
    // line-height: 60px;
    margin-bottom: 5px;
  }
  .cost_tbale {
    height: 100%;
    border-radius: 5px;
  }
}
.span_1 {
  text-align: left;
}
</style>
